<template>
  <view class="login">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="忘记密码" @clickLeft="back" />
    <view class="input_box u-flex u-ali-center" style="margin: 80rpx auto 30rpx;">
      <image class="input_icon" src="../../static/login/name.png" mode=""></image>
      <input class="input_in" maxlength="11" type="text" v-model="phone" placeholder="请输入手机号">
    </view>
    <view class="input_box u-flex u-ali-center" style="margin: 0 auto 30rpx;">
      <image class="input_icon" src="../../static/login/name.png" mode=""></image>
      <input class="input_in" maxlength="6" type="text" v-model="code" placeholder="请输入验证码">
      <view class="button1" @click="onClickSend">{{ sendBtnTitle }}</view>
    </view>
    <view class="input_box u-flex u-ali-center" style="margin: 0 auto 30rpx;">
      <image class="input_icon" src="../../static/login/name.png" mode=""></image>
      <input class="input_in" maxlength="20" type="text" v-model="pass1" placeholder="请输入登录密码（字母+数字8位数）">
    </view>

    <view class="input_button" @click="confimClick()">
      确认修改
    </view>
  </view>
</template>

<script>
  import {
    resetPassword
  } from "../../api/index.js"
  import {
    userCodeRegister
  } from '../../api/mine/mine.js'
  import md5 from '@/utils/md5.js'
  export default {
    data() {
      return {
        phone: '',
        code: '',
        pass1: '',
        pass2: '',
        sendBtnTitle: '获取验证码',
        isSendBtnEnable: true,
        times: 60,
        in_code: ''
      }
    },
    methods: {
      /**
       * 返回
       */
      back() {
        uni.navigateBack()
      },
      /**
       * 短信验证码
       */
      onClickSend() {
        if (this.isSendBtnEnable) {
          if (!/^1[34578]\d{9}$/.test(this.phone)) {
            this.$ui.toast('请填写正确的手机号');
            return;
          }
          if (true) {
            this.isSendBtnEnable = false;
            this.sendBtnTitle = this.times + '秒后重试'
            // 发送验证码，倒计时
            userCodeRegister({
              mobile: this.phone
            }).then(res => {
              let timer = setInterval(() => {
                this.times--
                this.sendBtnTitle = this.times + '秒后重试'
                if (this.times <= 0) {
                  clearInterval(timer)
                  this.sendBtnTitle = '发送验证码'
                  this.isSendBtnEnable = true;
                  this.times = 60
                }
              }, 1000)
            })
          }
        }
      },

      // 确认修改
      confimClick() {
        if (!this.phone || !this.code || !this.pass1) {
          this.$ui.toast('请填写信息')
        } else {
          resetPassword({
            mobile: this.phone,
            password: md5.hex_md5(this.pass1),
            code: this.code
          }).then(res => {

          })
        }

      }
    },
    onLoad() {
      // this.$ui.setStorage('token', 'istoken')
      // this.$ui.push('/pages/home/home', 'reLaunch')
    }
  }
</script>

<style lang="less">
  .login {
    .regeiter_icon {
      margin: 69rpx auto 71rpx;
      text-align: center;

      image {
        width: 170rpx;
        height: 170rpx;
      }
    }

    .input_box {
      position: relative;
      width: 590rpx;
      height: 69rpx;
      background: #FFFFFF;

      .input_icon {
        margin-left: 16rpx;
        margin-right: 23rpx;
        width: 23rpx;
        height: 26rpx;
      }

      .input_icon2 {
        position: absolute;
        right: 30rpx;
        width: 23rpx;
        height: 14rpx;
      }

      .input_in {
        width: 90%;
        border: none;
      }

      .button1 {
        position: absolute;
        right: 30rpx;
        font-size: 24rpx;
        line-height: 69rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #C99738;
      }
    }

    .input_button {
      margin: 50rpx auto;
      width: 590rpx;
      height: 80rpx;
      background: linear-gradient(45deg, #CFB05D 13%, #C99838 100%);
      border-radius: 4rpx;
      font-size: 30rpx;
      line-height: 80rpx;
      text-align: center;
      font-weight: bold;
      color: #FFFFFF;
    }
  }
</style>
